<template>
  <div>
    <p>watch 与  WatchEffect</p>
    <p>{{numRef}}</p>
    <p>{{name}}--- {{age}}</p>
  </div>
</template>

<script>
  import { ref, reactive, toRefs, watch, watchEffect} from 'vue';
  export default {
    name: 'WatchEeffect',
    setup() {
      const numRef = ref(100);
      const person = reactive({
        name: 'Jerry',
        age: 8
      })
      // 默认初始化 都执行一次 (为了寻找要被监听的属性值)
      // 无需显示指定监听属性 将根据实际使用值 自动监听
      watchEffect(() => {
        console.log(`watchEffect used`)
      }) 

      watchEffect(() => {
        console.log('numRef', numRef);
        console.log('person.name', person.name);
      })

      watchEffect(() => {
        console.log('person.age', person.age);
      })

      // 对值类型监听
      // watch(numRef, (val, oldVal)=> {
      //   console.log(`new:`, val, `old:`,oldVal)
      // }, {immediate: true}) // 初始化前就监听数据变化

      // // 对对象类型监听
      // watch(
      //   () => person.age, 
      //   (val,oldVal) => {
      //     console.log(`newperson:`, val, `oldperson:`,oldVal)
      // })

      setTimeout(() => {
        numRef.value = 20;
        person.age = 19;
      }, 3000);

      return{
        numRef,
        ...toRefs(person)
      }
    }
  }
</script>
